import Card from "antd/es/card/Card";
import BusinessMap from "../../../../../common/BusinessMap";
import { Button, Checkbox, Form, Input, Select, Space, Spin, InputNumber, Table, DatePicker } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import ScrollTable from "../../../../../common/ScrollTable";
import _ from 'lodash';
import { useParams } from 'react-router-dom'
import CztHandle from "../../../../../../utils/apis/CztHandle";
import '../CztEdit/index.less'
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
import FetchHelper from "../../../../../../utils/helper/fetch-helper";
import { AlertTwoTone } from "@ant-design/icons";
import { useForm } from "antd/es/form/Form";


export default function CztEdit() {
  const rootRef = useRef();
  const [dynamicForms, setDynamicForms] = useState();
  const [idDatas, setIdDatas] = useState();
  const [loading, setLoading] = useState();
  const { TextArea } = Input;
  const [form] = Form.useForm();
  const [xqDatas, setXqDatas] = useState();
  const [xqJson, setXqJson] = useState({})

  const [params, setParams] = useState({
    pageSize: 10,
    pageNum: 1,
    cztSmall: '学校'
  })
console.log('i,',idDatas,dynamicForms)
  //获取点击编辑行的id
  // debugger
  const id = useParams()?.id;

  useEffect(() => {
    CztHandle.cztEditDynamicApi().then(datas => {
      setDynamicForms(datas)
    })
  }, [])
  useEffect(() => {
    CztHandle.cztXqDynamicApi().then(datas => {

      setXqDatas(datas)
    })
  }, [])

  useEffect(() => {
    if (params) {
      setLoading(true)
      CztHandle.list(id).then(resp => {
        // console.log(resp)
        setIdDatas(resp.data)
        let xqEditData = JSON.parse(resp.data.xq)
        form.setFieldsValue({
          ...resp.data,
          xqJson: {
            ...xqEditData
          }
        })
        // console.log(JSON.parse(resp.data.xq))
      })
    }

  }, [xqJson, form, params, id])

  const currentDate = new Date().toISOString().split('T')[0];

  //表格

  const data = [];

  // const dynamicForms = [
  //   {
  //     "alias": "教育类型",
  //     "name": "jylx",
  //     "type": "input"
  //   },
  //   {
  //     "alias": "教育类型",
  //     "name": "jylx",
  //     "type": "input"
  //   }

  // ]
  const history = useHistory();
  const quxiaoHandle = () => {
    history.push(`/manager/czt`)
  }

  //保存
  //idDatas.cztjb=values.cztjb如何操作更多类似的，我的意思是idDatas与values有共同的值的情况下，把values赋值给idDatas
  //使用循环或遍历来实现。具体的实现方式取决于 idDatas 和 values 对象的结构
  const onFinish = (values) => {
    for (const key in idDatas) {
      if (values.hasOwnProperty(key)) {
        idDatas[key] = values[key]
      }
    }
    idDatas.xq = JSON.stringify(values.xqJson)
    // console.log(idDatas.xq)

    FetchHelper.putJson(`/admin-api/ybyj/cztjcb`, idDatas).then(resp => { alert("修改成功") }).catch(err => { alert("修改失败") })
  }

  return <div className='layout-h h100' style={{
    overflow: "scroll"
  }}>
    {/* <Card className='h100 fill w0' style={{
      position: "relative",
    }} >
      <BusinessMap />

    </Card> */}
    <Card className='h100 fill' style={{
      height: "1500px"
    }}>
      <Form method="post"
        onFinish={onFinish}
        form={form}>
        <header style={{
          fontSize: 20,
          fontWeight: "bold"
        }}>承灾体</header>
        <hr />

        <div className="InputForm" style={{
          display: "flex",
          flexWrap: "wrap"
        }}>
          {idDatas !== undefined && dynamicForms !== undefined && dynamicForms.map((formItem) => {
            let node;
            switch (formItem.type) {
              case 'select':
                node = <Select></Select>;
                break;
              case 'input':
              default:
                node = <Input style={{
                  width: "90%"
                }}
                  onChange={(e) => {

                  }}

                />
            }
            return <div style={{
              flexBasis: "33%",
              marginBottom: "10px"
            }}><Form.Item
              label={formItem.alias}
              name={formItem.name}

              rules={[
                {
                  required: true,

                }
              ]}

            >
                {node}
              </Form.Item></div>

          })}

        </div>
        <div className="InputForm" style={{
          display: "flex",
          flexWrap: "wrap"
        }}>
          <header style={{
            fontSize: 20,
            fontWeight: "bold",

          }}>详情编辑:</header>
          <div className="InputForm" style={{
            display: "flex",
            flexWrap: "wrap"
          }}>
            {idDatas !== undefined && xqDatas !== undefined && xqDatas.map((formItem) => {
              let node;
              switch (formItem.type) {
                case 'select':
                  node = <Select></Select>;
                  break;
                case 'input':
                default:
                  node = <Input style={{
                    width: "90%"
                  }}
                    onChange={(e) => {

                    }}

                  />
              }

              return <div style={{
                flexBasis: "33%",
                marginBottom: "10px"
              }}>
                <Form.Item
                  label={formItem.alias}
                  name={['xqJson', formItem.name]}
                // rules={[
                //   {
                //     required: true,

                //   }
                // ]}

                >
                  {node}
                </Form.Item></div>

            })}

          </div>
        </div>

        <div className="layout-h">
          <Button className="btn1" type="primary"
            htmlType="submit"
          >保存</Button>

          <Button onClick={quxiaoHandle} className="btn2">返回</Button>
        </div>
      </Form>
    </Card>


  </div>
}